<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert .close {
    text-decoration: none;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
/* 提示组件 */
#prompt-wrap{
	width:4rem;
	height: auto;
	line-height: 0.5rem;
	padding: 0.2rem 0.3rem;
	text-align: center;
	background: rgba(0,0,0,0.7);
	font-size: 0.3rem;
	color: #fff;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -2rem;
	border-radius: 0.2rem;
	z-index: 9999;
	display: none;
}
#prompt-wrap span{
	display: inline-block;
	vertical-align: middle;
	line-height: 0.4rem;
}
    </style>
</head>
<body>
    <script>
        //构造一个函数，参数为一个对象，实例化时，有值则进行传值，没有则赋值一个空对象
        function popAlert( opt ){
            this.opt = opt || {};
        };
        // 显示函数的设置
        popAlert.prototype.show = function(){
            // $("body").append('<div id="prompt-wrap"><span></span></div>');
           //   创建一个div元素
            // var Odiv = document.createElement('div');
            var Odiv = document.createElement('div');
            var that = this;
            var aclose ;
            //   给div添加class属性，这里使用的是多个属性的添加，同时将opt的class传递过来
            Odiv.classList.add('alert',this.opt['class']||'' );
            //   设定div包含的内容
            Odiv.innerHTML = this.opt['content'] || '';
            Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
            // 把div元素整体插入body内，appendChild是插在最后面
            document.body.appendChild(Odiv);
            aclose = document.querySelectorAll('.alert > .close');
            // 点击close按钮，则影藏此按钮的父级元素
            aclose.forEach(function(val){
                val.addEventListener( 'click',function(){
                    that.hide( this.parentNode );
                });
            });
        };
        //隐藏函数设置
        popAlert.prototype.hide = function( obj ){
            obj.style.display = 'none';
        };
         window.onload = function(){
             // 新对象实例化及调用show函数
              var oAlertInfo = new popAlert({
                 'class':'alert-info',
                 'content':'这是信息提示信息，如果你已经知道了，请忽略！'
             });
             oAlertInfo.show();  
         }
      </script>
</body>
</html>